<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>

<!DOCTYPE html >
<html>
    <head>
        <title>Rentpad Account Login</title>
        <META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
        <meta name="viewport" content="width=device-width, initial-scale=1"> 

        <link rel="stylesheet" href="${model.props.appPath}/css/jquery_mobile/jquery.mobile-1.2.1.min.css" type="text/css"/>
        <script src="${model.props.appPath}/js/jquery/jquery-1.8.3.min.js"></script>
        <script src="${model.props.appPath}/js/jquery_mobile/jquery.mobile-1.2.1.min.js"></script>    

        <style>
            a {color:#FFFFFF; text-decoration:none;}      /* unvisited link */
            a:visited {color:#FFFFFF;}  /* visited link */
            a:hover {color:#FFFFFF;}  /* mouse over link */
            a:active {color:#FFFFFF;}  /* selected link */
            @font-face
            {
                font-family: avant;
                src: url('${model.props.appPath}/fonts/avangmi-webfont.ttf');
            }
            body  * {
                font-family: avant !important;
            }
        </style>

        <script>
            function switchMenu() {
                if ($('#menu').is(':visible')) {                    
                    $("#menu").hide();
                } 
                else {
                    $("#menu").show();
                }
            }
        </script>

        <script>
            $('[name=show_password]').change(function() {
                var show = $('input[name=show_password]:checked').val() == 'yes';

                // toggle the password and the hidden text inputs
                $('#password_hidden').val($('#password').val());

                if (show) {
                    $('#fnameDivHidden').show();
                    $('#fnameDiv').hide();
                } else {
                    $('#fnameDivHidden').hide();
                    $('#fnameDiv').show();
                }
            });

            $('#fnameDivHidden').hide();
        </script>

        <script>
            (function(i, s, o, g, r, a, m) {
                i['GoogleAnalyticsObject'] = r;
                i[r] = i[r] || function() {
                    (i[r].q = i[r].q || []).push(arguments)
                }, i[r].l = 1 * new Date();
                a = s.createElement(o),
                        m = s.getElementsByTagName(o)[0];
                a.async = 1;
                a.src = g;
                m.parentNode.insertBefore(a, m)
            })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
            ga('create', 'UA-44197833-1', 'rentpad.com.ph');
            ga('send', 'pageview');
        </script>
    </head>

    <body>
        <div data-role="page" data-theme="d">
            <%@include file="header_mobile.jsp" %> 

            <div data-role="content" style="background-color: #ececec">

                <div style="text-align: center;">
                    <h2 style="margin: 2px;">Member Login</h2>
                </div>

                <form data-ajax="false" action="login.htm">	     
                    <div data-role="fieldcontain" style="border-bottom: 0px;">
                        <input type="email" name="uname" id="email" placeholder="Email" style="width: 100%" />
                    </div>                          
                    <div id="fnameDiv" data-role="fieldcontain">  
                        <input id="password" name="pass" type="password" placeholder="Password" style="width: 100%" />
                    </div>

                    <table border="0" style="padding-bottom: 2px; padding-top: 10px; width: 100%; font-weight: normal; font-family: Century Gothic, Verdana;">
                        <tr>
                            <td align="center">
                                <a href="signup.htm" data-role="button" data-ajax="false" >Register</a>
                            </td>
                            <td align="right">
                                <input type="hidden" name="s" value="1" data-theme="c"/>
                                <input type="submit" value="&nbsp;&nbsp;Login&nbsp;&nbsp;" data-theme="b"/>
                            </td>
                        </tr>
                        <c:if test="${model.loginFailed == 1}">
                            <tr>                                
                                <td colspan="2" align="center">
                                    <br>
                                    <span style="color: red; font-size: 12px;">You did not input a correct username/password combination.</span>
                                    <br>
                                    <br>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2" align="center">
                                    <a href="password.htm" style="color: #369; font-size: 12px; text-decoration: underline;">I forgot my password.</a>
                                </td>
                            </tr>
                        </c:if> 
                    </table>
                </form>

                <br>
            </div>

            <div data-role="footer">
                <%@include file="footer_mobile.jsp" %>      
            </div>

    </body>
</html>
